import React from 'react';
import QueueAnim from 'rc-queue-anim';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { Row, Col, Icon } from 'antd';

import Tetris from './technology-comp/Tetris';
import Column from './technology-comp/Column';
import Coordinate from './technology-comp/Coordinate';
import Building from './technology-comp/Building';


const pageData = [
  {
    title: '经验丰富',
    content: '长期致力于物联网技术研发',
    content1: '深厚的技术累积和行业经验',
    content2: '产业链上下游广泛的合作资源',
    links: [
      // <a key="0" href="https://ant.design" target="_blank">Web&nbsp;&nbsp;<Icon type="right" /></a>,
      // <a key="1" href="https://mobile.ant.design" target="_blank">Mobile&nbsp;&nbsp;<Icon type="right" /></a>,
      // <a key="2" href="https://pro.ant.design" target="_blank">Pro&nbsp;&nbsp;<Icon type="right" /></a>,
    ],
    Bg: Tetris,
  },
  {
    title: '有竞争力',
    content: '核心成员来源知名企业',
    content1: '用心、务实的作风赢得口碑',
    content2: '拥有自主知识产权的产品',

    Bg: Column,
  },
  {
    title: '高效灵活',
    content: '敏捷开发、高效响应',
    content1: '模块化、层次化的产品体系结构',
    content2: '产品化与个性化的灵活策略',

    Bg: Coordinate,
  },
  // {
  //   title: 'Egg',
  //   content: 'Node.js & Koa，为企业级框架和应用而生',
  //   full: true,
  //   Bg: Building,
  // },
];

export default class Design extends React.PureComponent {
  state = {
    hover: null,
  };
  onMouseEnter = (hover) => {
    this.setState({
      hover,
    });
  }
  onMouseLeave = () => {
    this.setState({
      hover: null,
    });
  }
  render() {
    const { isMobile } = this.props;
    const children = pageData.map((item, i) => {
      const colProps = {
        md: item.full ? 24 : 8, xs: 24,
      };
      return (
        <Col {...colProps} key={i.toString()} className="page2-item-wrapper">
          <div
            className={`page2-item${item.full ? ' full' : ''}`}
            onMouseEnter={() => { this.onMouseEnter(item.title); }}
            onMouseLeave={this.onMouseLeave}
          >
            <div className="page2-item-bg">
              {item.Bg && React.createElement(item.Bg, {
                hover: !isMobile && this.state.hover === item.title,
                isMobile,
              })}
            </div>
            <div className="page2-item-desc">
              <h4>{item.title}</h4>

              <p>
                <li>{item.content}</li>
              </p>


              <p>
                <li>{item.content1}</li>
              </p>

              <p>
                <li>{item.content2}</li>
              </p>

            </div>
          </div>
        </Col >
      );
    });
    return (
      <div className="page-wrapper page2" >
        <div className="page">
          <h1>核心优势</h1>
          <i />
          <OverPack className="page2-content">
            <QueueAnim component={Row} key="queue" type="bottom" leaveReverse>
              {children}
            </QueueAnim>
          </OverPack>
        </div>
      </div>);
  }
}
